<template>
    <div class="jx-content" style="margin-top:0">
        <div v-if="videoUrl=='' || show ">
            <div class="fr">
                 <button class="button-style saveBtn" @click="look" v-if="versionVideo!=''" >预览</button>
           </div>
           <div class="fileUp">
                <div>
                    <div class="nofile-tip">
                         <img src="./../../../assets/images/courseware_tips.png" />
                     </div>
                     <button class="button-style uploadBtn">上传视频<input id="version-file-input" type="file" @change="getFile"></button>
                     <p class="newadd"  v-if=" versionVideo ==''">提示：仅支持Mp4格式视频上传</p>
                     <el-button class="button-style"  v-if=" versionVideo !=''"  @click="downloadFile" :disabled='!flagDown'>下载视频</el-button>
                     <div v-if="versionVideo!=''"  class="down-up">
                        <span style='margin-top:10px;' >{{versionVideo}}</span>
                        <i class="iconfont icon-shanchu" @click="deleteFn"></i>
                        <span class="tips" >提示：仅支持Mp4格式视频上传</span>
                    </div>
                </div>
           </div>
        </div>
        <div v-if="videoUrl!='' && !show">
           <div class="fr">
                 <button class="button-style saveBtn" @click="repeatFn"  v-if=" videoUrl !='' ">修改</button>
           </div>
            <video id="video" autoplay controls  disablePictureInPicture  controlslist="nodownload" class="videoShow"  style="object-fit:fill" :src="videoUrl"></video>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                versionVideo:'',
                //课程id
                courseId:'',
                //章节id
                chapterId:'',
                //是否允许下载
                flagDown:'',
                 //下载文件
                down:'',
                 //视频Url
                 videoUrl:'',
                 //是否显示
                 show:''

            }
        },
        created() {
            this.chapterId = this.$localstorage.getLocalStorage('chapterInfoData').chapterId
            this.courseId = this.$localstorage.getLocalStorage('setCourseId')
            this.init()
        },
        methods:{
           init(){
                let self = this
                self.$http.get('/tes/course/'+ self.courseId+'/chapter/'+self.chapterId+'/make/resource?types=9').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                         if(res.data.experimentVideo.creativeVersion.length > 0){
                              self.flagDown = res.data.experimentVideo.creativeVersion[0].download
                              self.versionVideo = res.data.experimentVideo.creativeVersion[0].fileName
                              self.down = res.data.experimentVideo.creativeVersion[0].filePath
                              self.remark = res.data.experimentVideo.creativeVersion[0].remark
                              self.videoUrl = res.data.experimentVideo.displayVersion[0].filePath
                         }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
              //修改
            repeatFn(){
                this.show = true
                this.videoUrl = ''
            },
            look(){
                this.show = false
                this.init()
            },
             //下载文件
             downloadFile(){
                 let self = this
                 if(self.versionVideo!='' && self.flagDown){
                    self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource/file-download/permission',{
                        remark :self.remark,
                        fileName : self.versionVideo
                    }) .then((response) => {
                        let res = response.data
                        if(res.code == '200'){
                            self.token=res.data
                            let downloadElement = document.createElement('a');
                            downloadElement.style.display = 'none';
                            downloadElement.href = '/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource/file-download?token='+self.token
                            downloadElement.download = self.versionVideo; //下载后文件名
                            downloadElement.click(); //点击下载
                            //document.body.removeChild(downloadElement); //下载完成移除元素
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }
             },
            //文件上传
            getFile($event){
                let self = this;
                let fileType = $event.target.files[0].name
                fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length) //取得后缀名
                if(fileType.toLowerCase() != 'mp4'){
                    this.$message.error('请上传mp4文件')
                    return
                }
                const loading = self.$loading({
                    lock: true,
                    text: '文件上传中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                let formData = new FormData();
                formData.append('files', $event.target.files[0]);
                self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource-file?name=实验课学习视频&resourceType=9', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        loading.close()
                        //self.versionVideo = $event.target.files[0].name
                        $event.target.value=''
                        self.init()
                        self.show=false
                    }else{
                        loading.close()
                         $event.target.value=''
                        self.$message.error(res.message)
                    }
                })
            },
             //删除
            deleteFn(){
                let self = this;
                self.$confirm('是否确定删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource?resourceType=9',{
                        name:'实验课学习视频'
                    }).then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.init()
                            self.versionVideo =''
                            // window.location.reload(); 刷新好使
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                })
            },
        }
    }
</script>
<style scoped lang="scss">
    @import "./../../../styles/layout/color_variables";
    .jx-content{
        margin-top: 0px;
        #video{
            width: 1100px;
            margin: 40px auto
        }
        .saveBtn{
            margin-top: 30px;
        }
        .nofile-tip{
            margin-bottom: 50px;
        }
        .fileUp{
            text-align: center;
            padding: 100px 0 300px;
            #version-file-input{
                position: absolute;
                left: 0;
                opacity: 0;
                height: 30px;
                top: 0px;
                width: 90px;
                cursor: pointer;
            }
            .down-up{
                margin:10px 0;
                .tips{
                margin-top:10px;
                color: $btn-blue
                }
            }
            .uploadBtn{
                margin-right: 30px;
                position: relative;

            }
            .icon-shanchu{
                color: $blue;
                font-size: 20px;
                vertical-align: sub;
                cursor: pointer;
                margin-right: 5px;
            }
        }
        .iframse{
            padding-top: 50px;
            clear: both;
        }
        .newadd{
            padding: 15px 0;
            color:#1277eb;
        }
    }
</style>
